/*
 * @Author: xiaosihan 
 * @Date: 2023-12-19 16:36:59 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-19 19:55:12
 */

import * as echarts from "echarts";
import { CanvasTexture, Sprite, SpriteMaterial } from "three";

// 环形图标签
export default class RingSprite extends Sprite {

    constructor(total: number, value: number) {
        super();
        this.scale.set(0.08, 0.08, 0.08);
        this.setValue(total, value);
    }

    // 总数
    total = 2;
    // 值
    value = 1;

    // 设置总数是比值
    setValue(total: number, value: number) {
        this.total = total;
        this.value = value;
        this.echartInstace.setOption(this.getOption(this.total, this.value));
    }

    //echaertCanvas
    canvas = (() => {
        const canvas = document.createElement("canvas");
        canvas.width = 512;
        canvas.height = 512;
        // canvas.style.position = "absolute";
        // canvas.style.left = "0px";
        // canvas.style.top = "0px";
        // canvas.style.zIndex = "1";
        // document.body.appendChild(canvas);
        return canvas;
    })();

    texture = new CanvasTexture(this.canvas);

    getOption(total: number, value: number) {
        return {
            legend: {
                show: false,
            },
            graphic: [{
                type: 'text',
                left: 'center', // 文本的水平位置
                top: 'middle', // 文本的垂直位置
                style: {
                    text: value, // 文本内容
                    font: 'bold 200px Arial', // 文本样式
                    fill: '#ffffff', // 文本颜色
                }
            }],
            series: [
                {
                    type: 'pie',
                    radius: ['85%', '95%'],
                    center: ['50%', '50%'],
                    itemStyle: {
                        color: "#cccccc88"
                    },
                    label: {
                        show: false,
                    },
                    data: [
                        { value: 1, name: '' }
                    ]
                },
                {
                    type: 'pie',
                    radius: ['0%', '95%'],
                    center: ['50%', '50%'],
                    itemStyle: {
                        color: "#cccccc20"
                    },
                    label: {
                        show: false,
                    },
                    data: [
                        { value: 1, name: '' }
                    ]
                },
                {
                    type: 'pie',
                    radius: ['80%', '100%'],
                    center: ['50%', '50%'],
                    itemStyle: {
                        color: "#E0E16E",
                        borderRadius: 100, // 设置圆角半径
                        emphasis: {
                            shadowBlur: 10, // 设置发光效果的模糊半径
                            shadowColor: 'rgba(0, 0, 0, 0.5)', // 设置发光颜色
                        },
                    },
                    label: {
                        show: false,
                    },
                    data: [
                        { value: value, name: '' },
                        {
                            value: total - value,
                            itemStyle: {
                                color: 'none',
                                decal: {
                                    symbol: 'none'
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                }
            ]
        };
    }

    //echart
    echartInstace = (() => {
        const echartInstace = echarts.init(this.canvas);
        echartInstace.on('rendered', () => {
            this.texture.needsUpdate = true;
        });
        echartInstace.setOption(this.getOption(this.total, this.value));
        return echartInstace;
    })();

    renderOrder: number = 1;

    material = new SpriteMaterial({
        map: this.texture,
        sizeAttenuation: true,
        depthTest: false
    });

}